<template>
	<view>
		<view class="top">
			<view class="avatar">
				<view class="top-txt">头像</view>
				<image :src="info.user.avatar||'../../static/index_my_class.gif'" mode="" class="ava-tub"></image>
			</view>
			<view class="row" v-for="(item,index) in leftlist" :key="index" :class="item.class">
				<view class="left-txt" >{{item.left}}</view>
				<!-- <view class="left-txt" :range="typeindex">{{item[typeindex]}}</view> -->
				<view v-if="item.type == 'input'" class="right-input">
					<input v-model="item.right" placeholder="请输入" />
				</view>
				<picker v-else-if="item.type == 'select'" @change="selectChange" :data-index="index" class="right-input" :range="item.option" range-key="text">
					{{item.option[item.index].text}}
				</picker>
				<view v-else class="right-txt">
					{{item.right}}
				</view>
				<!-- <view class="sgin2">{{item.signe}}</view> -->
			</view>
			<view class="myfamily arrow">
				<view class="family">我的家长</view>
				<view class="family-name">张木林</view>
			</view>
		</view>
		<button @tap="saveInfo" class="but">保存</button>
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost,msg,ZC} = require("@/utils/common.js")
	const app = getApp();
	export default {
		data() {
			return {
				typeindex:0,
				student_id:0,
				info:{},
				// ---ZZP----去掉箭头改用class来显示箭头，增加几个属性用于编辑
				leftlist:[
					{field:'student_name',type:'input',left:'姓名',right:'张三'},
					{field:'sex',type:'select',index:0,option:[
						{text:'保密',value:0},
						{text:'男',value:1},
						{text:'女',value:2},
					],left:'性别',right:'女',class:'arrow'},
					{field:'phone',type:'input',left:'手机号码',right:'13333333333'},
					{field:'class',type:'text',left:'班级',right:'计算机一班'},
					{field:'student_no',type:'input',left:'学号',right:'506'}
				]
			}
		},
		onLoad(){
			appLogin((user_info)=>{
				this.student_id = app.globalData.student.student_id
				this.getInfo()
			})
			
		},
		methods: {
			// 获取资料
			getInfo(){
				httpGet({
					url:'users/student/info',
					data:{
						student_id:1
						// res
					}
				}).then((res)=>{
					this.info = res.result
					this.leftlist[0].right = res.result.student_name
					this.leftlist[1].index = res.result.sex||0
					this.leftlist[2].right = res.result.phone
					this.leftlist[3].right = res.result.class.class_name
					this.leftlist[4].right = res.result.student_no
				})
			},
			// 保存资料
			saveInfo(){
				var data = {
					student_name:this.leftlist[0].right,
					sex:this.leftlist[1].index,
					phone:this.leftlist[2].right,
					student_no:this.leftlist[4].right,
				}
				httpPost({
					url:'users/student/edit_info',
					data:data,
				}).then((res)=>{
					msg('保存成功！')
				})
			},
			// 用于处理下拉框改变的时候设置值
			selectChange(e){
				var index = e.currentTarget.dataset.index
				this.leftlist[index].index = e.detail.value
			}
		},
	}
</script>

<style>
page{
	background-color: rgb(245,245,245);
}
.top{
	width: 100%;
/* 	height: 690rpx;
	display: ; */
}
.arrow::after{
	content: "";
	display: block;
	background: url(../../static/arrow.png);
	background-position: 100%;
	margin-left: 30rpx;
	width: 25rpx;
	height: 33rpx;
}
.avatar{
	/* width: 100%; */
	height: 145rpx;
	border-bottom: 1rpx solid #e5e5e5;
	border-top: 1rpx solid #e5e5e5;
	background-color: #fff;
	/* ----ZZP----取消所有浮动 */
	/* float: left; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	padding: 0 30rpx;
}
.top-txt{
	font-size: 30rpx;
	color: #666666;
	height: 100%;
	/* margin-left: 40rpx; */
	line-height: 145rpx;
	/* text-align: center; */
}
.ava-tub{
	width: 85rpx;
	height: 85rpx;
	border-radius: 50%;
	display: inline-block;
	line-height: 85rpx;
	margin-left: 485rpx;
	/* margin-top: 35rpx; */
	
}
.sgin{
	font-size: 30rpx;
	font-weight: 700;
	color: #666666;
	height: 145rpx;
	/* float: right; */
	display: inline-block;
	line-height: 145rpx;
	padding-left: 20rpx;
}
.row{
	width: 100%;
	height: 110rpx;
	border-bottom: 1rpx solid #e5e5e5;
	background-color: #fff;
	/* ----ZZP----取消所有浮动 */
	/* float: right; */
	display: flex;
	align-items: center;
	/* margin-left: 40rpx; */
	padding: 0 30rpx;
	box-sizing: border-box;
}
.right-txt,.right-input{
	position: relative;
	/* width: 610rpx; */
	/* margin-top: 35rpx; */
	line-height: 110rpx;
	font-size: 30rpx;
	/* float: right; */
	color: #666666;
	text-align: right;
	/* -----ZZP----修改为动态宽度 */
	flex-grow: 1;
	/* margin-right: 42rpx; */
}
.left-txt{
	font-size: 30rpx;
	color: #666666;
	height: 100%;
	width: 140rpx;
	/* position: relative; */
	line-height: 110rpx;
	/* float: left; */
	
}
.myfamily{
	width: 100%;
	height: 110rpx;
	border-bottom: 1rpx solid #e5e5e5;
	border-top: 1rpx solid #e5e5e5;
	background-color: #fff;
	/* ----ZZP----取消所有浮动 */
	/* float: left; */
	display: flex;
	/* -----ZZP----增加上边距 */
	margin-top: 20rpx;
	// margin-left: 30rpx;
	line-height: 145rpx;
	align-items: center;
	/* -----ZZP----修改为外部容器设置内边距 */
	padding: 0 30rpx;
	box-sizing: border-box;
}
.family{
	margin-left: 40rpx;
	font-size: 30rpx;
	color: #666666;
	width: 140rpx;
	
}
.family-name{
	float: right;
	text-align: right;
	/* margin-left: 30rpx; */
	color: #666666;
	font-size: 30rpx;
	/* -----ZZP----修改为动态宽度 */
	/* width: 610rpx; */
	flex-grow: 1;
	/* margin-right: 42rpx; */
}
.but{
	margin-top: 100rpx;
	height: 80rpx;
	width: 610rpx;
	line-height: 80rpx;
	border-radius: 50rpx;
	background-color: rgb(72,131,246);
	color: #fff;
}
</style>
